<script setup>

import { useBreadsStore } from '@/stores'
import { RouterLink } from 'vue-router'
import { storeToRefs } from 'pinia'
import { homeBreadcrumb } from '@/config'

const { breadCrumbs } = storeToRefs(useBreadsStore())

</script>

<template>
  <nav class="breadcrumbs-container">
    <ol typeof="BreadcrumbList">
      <li class="breadcrumb-home">
        <RouterLink class="breadcrumb link" to="/">{{ homeBreadcrumb }}</RouterLink>
      </li>
      <li v-for="v in breadCrumbs" :key="v.key" typeof="ListItem">
        <span v-if="!v.path" class="breadcrumb">{{ v.title }}</span>
        <RouterLink v-else class="breadcrumb link" :to="{ path: v.path }">{{ v.title }}</RouterLink>
      </li>
    </ol>
  </nav>
</template>

<style scoped lang="scss">
.breadcrumbs-container {
  display: flex;
  align-items: center;
}

.breadcrumbs-container ol {
  display: flex;
  flex-wrap: wrap;
  padding: .25rem 0;
  row-gap: .25rem;
}

ol,
ul {
  list-style: none;
  padding: 0;
}

.breadcrumbs-container li {
  hyphens: auto;
  line-height: 1.5em;
}

.breadcrumb {
  font-family: "Lato", "Helvetica", "Arial", sans-serif;
  color: var(--text-01);
}

.link:hover {
  text-decoration: underline cadetblue 2px;
}

.breadcrumbs-container li:not(:last-child) .breadcrumb::after {
  background-color: #878c4f;
  content: "";
  display: block;
  flex-shrink: 0;
  margin: 0 .25rem;
  text-align: center;
  width: 15px;
  mask-image: url('/static/svg/bread.svg');
  mask-size: 15px;
  height: 12px;
  transform: rotate(-90deg);
}

.breadcrumbs-container li a {
  align-items: center;
  display: flex;
}
</style>
